<template>
  <form action="#" style="margin: 20px">
    <p @click="tag" :style="{ width: w, height: h, backgroundColor: bgc }"></p>
  </form>
</template>

<script>
import { reactive, toRefs } from '@vue/reactivity'
export default {
  setup () {
    const state = reactive({
      w: '200px',
      h: '200px',
      bgc: 'cyan'
    })

    let num = 0
    const tag = () => {
      num += 1
      if (num === 1) {
        state.bgc = 'pink'
      } else if (num === 2) {
        state.bgc = 'green'
      } else {
        state.bgc = 'cyan'
        num = 0
      }
    }

    return {
      ...toRefs(state),
      tag
    }
  }
}
</script>
